<template>
  <div id="wrapper">
    <nav class="nav js-nav is-shown">
      <header class="nav-header">
        <h1 class="nav-title">Electron <strong>API Demos</strong></h1>
        <svg class="nav-header-icon">
          <use xlink:href="static/img/icons.svg#icon-electron"></use>
        </svg>
      </header>

      <div class="nav-item u-category-windows">
        <h5 class="nav-category">
          <svg class="nav-icon">
            <use xlink:href="static/img/icons.svg#icon-windows"></use>
          </svg>
          Windows
        </h5>
        <button type="button" id="button-windows" data-section="windows" class="nav-button">Create and manage <em>windows</em>
        </button>
        <button type="button" id="button-crash-hang" data-section="crash-hang" class="nav-button">Handling window <em>crashes
          and hangs</em></button>
      </div>

      <div class="nav-item u-category-menu">
        <h5 class="nav-category">
          <svg class="nav-icon">
            <use xlink:href="static/img/icons.svg#icon-menu"></use>
          </svg>
          Menus
        </h5>
        <button type="button" id="button-menus" data-section="menus" class="nav-button">Customize <em>menus</em>
        </button>
        <button type="button" id="button-shortcuts" data-section="shortcuts" class="nav-button">Register keyboard <em>shortcuts</em>
        </button>
      </div>

      <div class="nav-item u-category-native-ui">
        <h5 class="nav-category">
          <svg class="nav-icon">
            <use xlink:href="static/img/icons.svg#icon-native-ui"></use>
          </svg>
          Native User Interface
        </h5>
        <button type="button" id="button-ex-links-file-manager" data-section="ex-links-file-manager" class="nav-button">
          Open <em>external links</em> or system <em>file manager</em></button>
        <button type="button" id="button-notifications" data-section="notifications" class="nav-button"><em>Notifications</em>
          with and without custom image
        </button>
        <button type="button" id="button-dialogs" data-section="dialogs" class="nav-button">Use system <em>dialogs</em>
        </button>
        <button type="button" id="button-tray" data-section="tray" class="nav-button">Put your app in the <em>tray</em>
        </button>
        <button type="button" id="button-drag" data-section="drag" class="nav-button"><em>Drag</em> and drop files
        </button>
      </div>

      <div class="nav-item u-category-communication">
        <h5 class="nav-category">
          <svg class="nav-icon">
            <use xlink:href="static/img/icons.svg#icon-communication"></use>
          </svg>
          Communication
        </h5>
        <button type="button" id="button-ipc" data-section="ipc" class="nav-button">Communicate between the <em>two
          processes</em></button>
      </div>

      <div class="nav-item u-category-system">
        <h5 class="nav-category">
          <svg class="nav-icon">
            <use xlink:href="static/img/icons.svg#icon-system"></use>
          </svg>
          System
        </h5>
        <button type="button" id="button-app-sys-information" data-section="app-sys-information" class="nav-button">Get
          app or user <em>system information</em></button>
        <button type="button" id="button-clipboard" data-section="clipboard" class="nav-button">Copy and paste from the
          <em>clipboard</em></button>
        <button type="button" id="button-protocol" data-section="protocol" class="nav-button">Launch app from <em>protocol
          handler</em></button>
      </div>

      <div class="nav-item u-category-media">
        <h5 class="nav-category">
          <svg class="nav-icon">
            <use xlink:href="static/img/icons.svg#icon-media"></use>
          </svg>
          Media
        </h5>
        <button type="button" id="button-pdf" data-section="pdf" class="nav-button"><em>Print</em> to PDF</button>
        <button type="button" id="button-desktop-capturer" data-section="desktop-capturer" class="nav-button">Take a
          <em>screenshot</em></button>
      </div>

      <footer class="nav-footer">
        <button type="button" id="button-about" data-modal="about" class="nav-footer-button">About</button>
        <a class="nav-footer-logo" href="https://github.com" aria-label="Homepage">
          <svg class="nav-footer-icon">
            <use xlink:href="static/img/icons.svg#icon-love"></use>
          </svg>
        </a>
      </footer>
    </nav>
    <main class="js-content" @click="bindDemoToggleWrapper">
      <router-view class="is-shown"></router-view>
    </main>
  </div>
</template>

<script>
  import SystemInformation from './LandingPage/SystemInformation'
  import ele from 'electron'
  import path from 'path'

  const {shell, remote, BrowserWindow} = ele
  const dialog = remote.dialog
  const settings = require('electron-settings')

  export default {
    name: 'landing-page',
    components: {
      SystemInformation
    },
    created () {
      console.log(settings)
    },
    mounted () {
      // Default to the demo that was active the last time the app was open
      // const buttonId = settings.get('activeDemoButtonId')
      // if (buttonId) {
      //   document.getElementById(buttonId).click()
      // }
    },
    methods: {
      initCodeBlocks () {
        require('../../assets/code-blocks.js')
      },
      bindDemoToggleWrapper (evt) {
        let _target = evt.target
        if (_target.classList.contains('demo-toggle-button')) {
          const parent = _target.parentElement
          parent.classList.toggle('is-open')
          if (parent.classList.contains('is-open')) {
            settings.set('activeDemoButtonId', _target.getAttribute('id'))
          } else {
            settings.delete('activeDemoButtonId')
          }
        }

        this.initCodeBlocks()
      },
      // 打开外部链接
      open (link) {
        shell.openExternal(link)
      },
      showOpenDialog () {
        dialog.showOpenDialog({
          title: 'title',
          buttonLabel: '弄好啊',
          filters: [
            {name: '图片', extensions: ['jpg', 'png', 'gif']},
            {name: '视频', extensions: ['mkv', 'avi', 'mp4']},
            {name: '自定义文件', extensions: ['as']},
            {name: '所有文件', extensions: ['*']}
          ],
          properties: ['openFile']
        }, (filePaths, bookmarks, securityScopedBookmarks) => {
          console.log(filePaths, bookmarks, securityScopedBookmarks)
        })
      },
      showSaveDialog () {
        dialog.showSaveDialog({
          title: 'title',
          buttonLabel: '保存为',
          defaultPath: path.resolve(__static, 'dock-icon.png')
        }, (filePaths, bookmarks, securityScopedBookmarks) => {
          console.log(filePaths, bookmarks, securityScopedBookmarks)
        })
      },
      showMessageBox (type) {
        let broWindow = new BrowserWindow({
          height: 300,
          useContentSize: true,
          width: 500,
          icon: 'static/dock-icon.png'
        }).show()
        dialog.showMessageBox(broWindow, {
          type: type,
          title: type,
          message: type,
          detail: 'detail',
          checkboxLabel: 'checkboxLabel',
          checkboxChecked: true,
          buttons: ['确定', '取消'],
          defaultId: 1
        }, (response, checkboxChecked) => {
          console.log(response, checkboxChecked)
        })
      },
      showErrorBox () {
        dialog.showErrorBox('错误提示', '错误内容')
      },
      appQuit () {
        // Notification({})
        let myNotification = new Notification('标题', {
          body: '通知正文内容'
        })
        dialog.showOpenDialog({
          title: 'title',
          buttonLabel: '弄好啊',
          filters: [
            {name: '图片', extensions: ['jpg', 'png', 'gif']},
            {name: '视频', extensions: ['mkv', 'avi', 'mp4']},
            {name: '自定义文件', extensions: ['as']},
            {name: '所有文件', extensions: ['*']}
          ],
          properties: ['openFile']
        }, (filePaths) => {
          console.log(filePaths)
        })

        myNotification.onclick = () => {
          console.log('通知被点击')
        }
      }
    }
  }
</script>

<style>
  @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    font-family: 'Source Sans Pro', sans-serif;
  }

  #wrapper {
    display: flex;
    background: radial-gradient(
            ellipse at top left,
            rgba(255, 255, 255, 1) 40%,
            rgba(229, 229, 229, .9) 100%
    );
    height: 100vh;
    width: 100vw;
  }

  #logo {
    height: auto;
    margin-bottom: 20px;
    width: 420px;
  }

  main {
    display: flex;
    justify-content: space-between;
  }

  .js-content {
    position: relative;
    flex: auto;
  }

  .left-side {
    display: flex;
    flex-direction: column;
  }

  .welcome {
    color: #555;
    font-size: 23px;
    margin-bottom: 10px;
  }

  .title {
    color: #2c3e50;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 6px;
  }

  .title.alt {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .doc p {
    color: black;
    margin-bottom: 10px;
  }

  .doc button {
    font-size: .8em;
    cursor: pointer;
    outline: none;
    padding: 0.75em 2em;
    border-radius: 2em;
    display: inline-block;
    color: #fff;
    background-color: #4fc08d;
    transition: all 0.15s ease;
    box-sizing: border-box;
    border: 1px solid #4fc08d;
  }

  .doc button.alt {
    color: #42b983;
    background-color: transparent;
  }
</style>
